/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-18 16:53:56
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-19 17:54:53
 * @FilePath: \react-demo\src\page\Year\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { DatePicker, NavBar } from 'antd-mobile';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { useDate } from '@/hooks/useDate';
import { useYearBillList } from '@/hooks/useBillList';
import { getMonthOverview, getOverview } from '@/contants';
import TwoLineOverview from '@/components/TwoLineOverview';
import OneLineOverview from '@/components/OneLineOverview';

import './index.scss'

const Year = () => {

  const { date, visible, onDateChange, onShowDate, onHideDate } = useDate();

  const selectedYear = date.get('year');
  const selectedYearBills = useYearBillList(selectedYear);

  const overview = getOverview(selectedYearBills);
  const thisYear = dayjs().get('year');
  const maxMonth = thisYear === selectedYear ? dayjs().get('month') + 1 : 12;
  const monthBillList = new Array(maxMonth)
    .fill('')
    .map((_, month) => {
      return getMonthOverview(selectedYearBills, month)
    })
    .reverse();

  return (
    <div className="billDetail">
      <NavBar className="nav" backArrow={false}>
        <div className="nav-title" onClick={onShowDate}>
          {selectedYear}年
          <span className={classNames('arrow', visible && 'expand')}></span>
        </div>
      </NavBar>
      <DatePicker
        className="kaDate"
        title="记账日期"
        precision="year"
        visible={visible}
        onClose={onHideDate}
        max={new Date()}
        onConfirm={onDateChange}
      />

      <div className="content">
        <div className='overview'>
          <TwoLineOverview
            pay={overview.pay}
            income={overview.income}
            className="overview"
          />
        </div>
        {
          monthBillList.map((item, index) => {
            return (
              <div
                className="monthBill"
                key={index}
              >
                <div className="date">{maxMonth - index}月</div>
                <OneLineOverview pay={item.pay} income={item.income} />
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default Year;